<template>
    <div class="table-root">
        <table class="table-element">
            <tr>
                <th v-for="(item, index) in columns" :key="`${item.key}_${index}`">{{item.name}}</th>
            </tr>
            <tr class="data-tr" v-for="(trItem, trIndex) in tableData" :key="`_${trIndex + Math.random()}`">
                <td v-for="(tdItem, index) in Object.keys(trItem)" :key="`td_${tdItem}_${index} _${trIndex}`">
                    {{trItem[tdItem]}}>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
    import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
    import {reactive, toRefs} from 'vue'

    export default {
        props: {
            columns: {
                type: Array,
                default: () => [
                    {
                        key: 'area',
                        name: '区域'
                    },
                    {
                        key: 'air',
                        name: '气温'
                    },
                    {
                        key: 'humidity',
                        name: '湿度'
                    },
                    {
                        key: 'wind',
                        name: '风力'
                    },
                    {
                        key: 'time',
                        name: '时间'
                    },
                ]
            },
            dataSource: {
                type: Array,
                default: () => [
                    {
                        area: '玛曲县',
                        air: '-1',
                        humidity: '78%',
                        wind: '2级',
                        time: '17:00'
                    },
                    {
                        area: '碌曲县',
                        air: '-5',
                        humidity: '76%',
                        wind: '4级',
                        time: '17:00'
                    },
                    {
                        area: '夏河县',
                        air: '-1',
                        humidity: '69%',
                        wind: '3级',
                        time: '17:00'
                    },
                ]
            }
        },

        computed: {
            tableData() {
                let {dataSource, columns} = this;
                if (!dataSource || dataSource.length === 0 || !columns || columns.length === 0) return []
                let keys = columns.map(item => item.key);
                let result = [];
                dataSource.forEach(trItem => {
                    let tdItem = {};
                    keys.forEach(key => {
                        tdItem[key] = trItem[key] || ''
                    });
                    JSON.stringify(tdItem) !== '{}' && result.push(tdItem);
                });

                return result
            }
        },
    };
</script>

<style lang="scss" scope>
    .table-root{
        height: 100%;
        width: 100%;
        overflow: auto;
        .table-element {
            height: 100%;
            width: 100%;


            tr {
                th {
                    border: none;
                    text-align: center;
                    height: 36px;
                    line-height: 36px;
                    font-weight: bold;
                    color: #39ffdc;
                    font-size: 15px;
                    background: rgba(0, 0, 0, .1);
                }

                td {
                    border: none;
                    font-size: 15px;
                    text-align: center;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    height: 36px;
                    line-height: 36px;
                }

                &.data-tr {
                    color: white;

                    &:hover {
                        color: #39ffdc;
                    }
                }
            }
        }
    }
</style>
